<template>
  <div>
    <h1>我是App组件</h1>
    <div>
      <button @click="currentCom='A'">A</button>
      <button @click="currentCom='B'">B</button>
      <button @click="currentCom='C'">C</button>
    </div>
<!--    缓存组件-->
<!--    1.include可以是字符串值-->
<!--    <keep-alive include="A,B">-->
<!--      动态组件-->
<!--      <component :is="currentCom"></component>-->
<!--    </keep-alive>-->

<!--    2.include可以是数组-->
<!--    <keep-alive :include="['A','B']">-->
      <!--      动态组件-->
<!--      <component :is="currentCom"></component>-->
<!--    </keep-alive>-->

<!--    3.include可以是正则-->
    <keep-alive :include="/A|B/">
      <!--      动态组件-->
      <component :is="currentCom"></component>
    </keep-alive>

<!--    相反，当我们需要缓存的组件过多时就需要使用exclude-->
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      currentCom:''
    }
  },
  components:{
    //书写异步组件的原因：
    //在大型应用中，我们可能将应用拆分成小的代码块，并且只在需要的时候才从服务器加载一个模块
    //Vue允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。
    // Vue只有在这个组件需要渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来冲渲染
    A:()=>import('@/components/A'),
    B:()=>import('@/components/B'),
    C:()=>import('@/components/C')
  }
}
</script>

<style scoped>
</style>